<template>

   <div class="Koinlist">
   <ul>
       <li>
           <img src="@/assets/img/1.jpg"/>
           <span>缤纷彩虹曲奇饼</span>
       </li>
       <li>
           <img src="@/assets/img/2.jpg"/>
           <span>女士单肩手提包</span>
       </li>
       <li>
           <img src="@/assets/img/3.jpg"/>
           <span>berko蛋糕</span>
       </li>
       <li>
           <img src="@/assets/img/4.jpg"/>
           <span>巧克力甜甜圈</span>
       </li>
       <li>
           <img src="@/assets/img/5.jpg"/>
           <span>室内小盆栽绿植栽</span>
       </li>
   </ul>

   <div class="cursor">
       <div class="btnlist">
           <button class="active" type="submit" @click="btn1(1)">畅销榜</button>

           <div id="lb" style="display:none">
           <li v-for="item in data.ImgList" :key ="item">
            <p v-if="isVisible">{{item.title}} - 销售量:{{item.sale}}</p>
           </li>
           </div>

            <div>
                <button @click="btn2(2)">热量榜</button>
                <div id="lb" style="display:none">
                <ul>
                    <li v-for="item in data.ImgList" :key ="item">
                        {{item.title}} - 热度量:{{item.hot}}
                    </li>
                </ul>
            </div>
           </div>
       </div>
       <table border="1" cellpadding="0" cellspacing="0">
        
           <tr>
               <th>序号</th>
               <th>产品</th>
               <th>展示图</th>
               <th>上架时间</th>
               <th>上架情况</th>
               <th>热度</th>
               <th>销售量</th>
               <th>查看量</th>

           </tr>
           <tr v-for="(item,index) in salelist" :key ="index" v-show="bool">
               <td>{{item.id}}</td>
               <td>{{item.title}}</td>
               <td><img :src="item.imgURL" width="50px" height="50px" alt=""></td>
               <td>{{item.createTime}}</td>
               <td>{{item.grounding == 1 ? '已上架':'未上架'}}</td>
               <td>{{item.hot}}</td>
               <td>{{item.sale}}</td>
               <td>{{item.visits}}</td>
           </tr>
           <tr v-for="(item,index) in hotlist" :key ="index" v-show="bool">
               <td>{{item.id}}</td>
               <td>{{item.title}}</td>
               <td><img :src="item.imgURL" width="50px" height="50px" alt=""></td>
               <td>{{item.createTime}}</td>
               <td>{{item.grounding == 1 ? '已上架':'未上架'}}</td>
               <td>{{item.hot}}</td>
               <td>{{item.sale}}</td>
               <td>{{item.visits}}</td>
           </tr>
           <tr v-for="(item,index) in vislist" :key ="index" v-show="bool">
               <td>{{item.id}}</td>
               <td>{{item.title}}</td>
               <td><img :src="item.imgURL" width="50px" height="50px" alt=""></td>
               <td>{{item.createTime}}</td>
               <td>{{item.grounding == 1 ? '已上架':'未上架'}}</td>
               <td>{{item.hot}}</td>
               <td>{{item.sale}}</td>
               <td>{{item.visits}}</td>
           </tr>

       </table>
   </div>
 
</div>
</template>

<script>
import ImgList from '@/assets/index'
export default {
   
    name : 'koinList',
    data(){
        return{
          ImgList,
          bool:0,
          salelist:[],
          hotlist:[],
          vislist:[]
        }      
},
methods:{
btn(x){
    this.bool=x;
    for(let item of ImgList.ImgList){
        if(item.grounding==trun){
            this.salelist.push(item)
        }
    }
    console.log(this.salelist);
    this.salelist.sort((a,b)=>{
        return b.sale-a.sale
    })
    this.salelist.splice(10,20)
},
btn1(x){
    this.bool=x;
    for(let item of ImgList.ImgList){
        if(item.grounding==trun){
            this.hotlist.push(item)
        }
    }
    this.hotlist.sort((a,b)=>{
        return b.hot-a.hot
    })
    this.hotlist.splice(10,20)
    },
    btn2(x){
    this.bool=x;
    for(let item of ImgList.ImgList){
        if(item.grounding==trun){
            this.vislist.push(item)
        }
    }
    this.vislist.sort((a,b)=>{
        return b.visits-a.visits
    })
    this.vislist.splice(5)
    console.log(this.vislist);
    
    }
}

}

</script>

<style scoped>
.Koinlist{
  width: 100%;
  height: 100%;
}
.Koinlist ul{
    width: 95%;
    height: 80px;
    margin: 30px auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.Koinlist ul li{
    width:19%;
    height: 100%;
    background-color: brown;
    text-align: center;
}
.Koinlist ul li img{
    width: 85%;
    margin-top: 20px;
}
.Koinlist ul li span{
    display: block;
    width: 100%;
    margin-top: 8px;
}
.Koinlist .cursor{
    width: 95%;
    overflow: hidden;
    margin: 0 auto;
    background-color: chocolate;

}
.Koinlist .cursor .btnlist{
    width: 100%;
    overflow: hidden;;
    border-bottom: 2px dotted white;
}
.Koinlist .cursor .btnlist button{
    border: none;
    background-color: orange;
    border: 1px solid orange;
    color: white;
    width: 100%;
    height: 50px;
}
.Koinlist .cursor .btnlist button.active{
margin-top: 50px;
 background-color: white;
 overflow: hidden;
 color: orange;
 border: 1px solid gold;
}
.Koinlist .cursor table{
    width: 100%;
    height: 100%;
}
</style>